<template>
  <el-tabs v-model="activeName">
    <el-tab-pane label="基本设置" name="first">
      <el-form ref="form1" label-width="100px">
        <el-form-item label="校验字段">
          <el-select v-model="field.name">
            <el-option v-for="item in availableFields" :value="item.name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="错误代码">
          <el-input v-model="field.error_code"></el-input>
        </el-form-item>
        <el-form-item label="错误描述">
          <el-input v-model="field.error_description"></el-input>
        </el-form-item>
        <el-form-item label="检验数据类型">
          <el-row>
            <el-checkbox true-label="Y" false-label="N" v-model="field.data_type_verified"></el-checkbox>
          </el-row>
        </el-form-item>
        <el-form-item label="数据类型">
          <el-select :disabled="field.data_type_verified=='N'" clearable v-model="field.data_type">
            <el-option v-for="item in options.inputTypes" :value="item"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-tab-pane>
    <el-tab-pane label="数据校验" name="second">
      <el-form ref="form2" label-width="140px">
        <el-form-item label="允许空">
          <el-row>
            <el-col :span="4">
              <el-checkbox true-label="Y" false-label="N" v-model="field.null_allowed"></el-checkbox>
            </el-col>
            <el-col :span="8">
              <label>只允许空</label>
              <el-checkbox true-label="Y" false-label="N" v-model="field.only_null_allowed"></el-checkbox>
            </el-col>
            <el-col :span="12">
              <label>只允许数值类型的数据</label>
              <el-checkbox true-label="Y" false-label="N" v-model="field.only_numeric_allowed"></el-checkbox>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="最大字符串长度">
          <el-input-number :min="0" v-model="field.max_length"></el-input-number>
        </el-form-item>
        <el-form-item label="最小字符串长度">
          <el-input-number :min="0" v-model="field.min_length"></el-input-number>
        </el-form-item>
        <el-form-item label="最大值">
          <el-input-number v-model="field.max_value"></el-input-number>
        </el-form-item>
        <el-form-item label="最小值">
          <el-input-number v-model="field.min_value"></el-input-number>
        </el-form-item>
      </el-form>
    </el-tab-pane>
    <el-tab-pane label="字符串匹配" name="third">
      <el-form ref="form3" label-width="180px">
        <el-form-item label="允许开始的字符串">
          <el-input v-model="field.start_string"></el-input>
        </el-form-item>
        <el-form-item label="允许结束的字符串">
          <el-input v-model="field.end_string"></el-input>
        </el-form-item>
        <el-form-item label="不允许开始的字符串">
          <el-input v-model="field.start_string_not_allowed"></el-input>
        </el-form-item>
        <el-form-item label="不允许结束的字符串">
          <el-input v-model="field.end_string_not_allowed"></el-input>
        </el-form-item>
        <el-form-item label="合法数据的正则表达式">
          <el-input v-model="field.regular_expression"></el-input>
        </el-form-item>
        <el-form-item label="不合法数据的正则表达式">
          <el-input v-model="field.regular_expression_not_allowed"></el-input>
        </el-form-item>
      </el-form>

    </el-tab-pane>
    <el-tab-pane label="从步骤中取值" name="4th">
      <el-form ref="form4" label-width="140px">
        <el-form-item label="允许的值">
          <el-input type="textarea" :disabled="field.is_sourcing_values=='Y'" style="width: 350px" :autosize="{ minRows: 2, maxRows: 6}"  placeholder="请输入内容,以逗号分割" v-model="field.allowed_value"></el-input>
        </el-form-item>
        <el-form-item label="从其他步骤获得值">
          <el-checkbox true-label="Y" false-label="N" v-model="field.is_sourcing_values"></el-checkbox>
        </el-form-item>
        <el-form-item label="读取步骤">
          <el-select :disabled="field.is_sourcing_values=='N'" clearable v-model="field.sourcing_step">
            <el-option v-for="item in stepList" :label="item.step" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="读取字段">
          <el-select :disabled="field.is_sourcing_values=='N'" clearable v-model="field.sourcing_field">
            <el-option v-for="item in fieldList" :value="item.name"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-tab-pane>
  </el-tabs>
</template>
<style lang="scss" scoped>
  .el-form-item{
    .el-select,.el-input{
      width: 350px;
    }
    .el-input-number{
      width: 350px;
    }
    .el-input[type=area]{
      width:250px
    }
  }

</style>
<script>
  import {Fields, Options} from "../../../model/DataModel"
  import uniqBy from "lodash/uniqBy"

  export default{
    props: {
      field: {
        type: Object,
        default: () => Fields.Validator()
      },
      availableFields: {
        type: Array,
        default: []
      },
    },
    computed: {
      stepList(){
        return uniqBy(this.availableFields.map(el => ({step:el.step,id:el.stepId})),"id");
      },
      fieldList(){
        return this.availableFields.filter(el => el.stepId===this.field.sourcing_step)
      }
    },
    data(){
      return {
        activeName: "first",
        options: Options
      }
    }
  }
</script>
